<template>
  <div>
    <!-- <div>
        施工监管
    </div> -->
    <layout-card v-model="search" :filters="isaskOptions" headline="信息列表" headtitle="数据筛选" :hasButton="true"
      @search-change="searchChange" @search-reset="searchReset">
      <template #action>
        <el-button type="primary" @click="handleExport">导出</el-button>
        <!-- <el-button type="primary" @click="goAdd">新增</el-button> -->
      </template>
      <table-common @sort-change="handleSort" stripe :columns="askColumns" :loading="loading" :pagination="pager"
        :table-data="tableData" size="large" @current-change="currentChange" @size-change="sizeChange">
        <template #action="{ row }">
          <el-button v-if="row.isSupervision == '1'" size="small" text @click="goDetails(row.supervisionId)"
            type="primary">查看</el-button>
          <el-button v-else size="small" text @click="clickinspect(row.supervisionId)" type="primary">检查</el-button>
        </template>
      </table-common>
    </layout-card>
    <!-- <seedemo ref="refseedemo"></seedemo>
    <inspectdemo ref="refinspectdemo" /> -->
  </div>
</template>
<script lang="ts" setup>
import {
  getapplyList, //查询
  Supervisionexport, //导出
  PageListType,
} from "@/api/construction/projectSupervise";
import {
  getCreateUserOrgIdData,
  getcreatorData,
  getsprojectIdData,
  getterminalsData,
  getgridIdsData,
} from "@/views/construction/project-supervise/config/options";
import { ref, reactive, onBeforeMount, onMounted } from "vue";
import LayoutCard from "@/components/LayoutCard/index.vue";
import TableCommon from "@/components/TableCommon/index.vue";
// import seedemo from "@/views/construction/project-supervise/components/seedemo/index.vue";
// import inspectdemo from "@/views/construction/project-supervise/components/inspectdemo/index.vue";
import { askColumns } from "@/views/construction/project-supervise/config/columns";
import { askOptions } from "@/views/construction/project-supervise/config/filters";
import { ElMessage } from "element-plus";

import router from "@/router";

const isaskOptions = ref(askOptions);
// const refseedemo = ref(); //查看组件
// const refinspectdemo = ref(); //检查组件

/**
 * 约束
 */
interface SearchType {
  projectId?: number; //项目id
  supervisionId?: number; //监管ID
  creatorId?: number; //创建人id
  createTime?: string[];
  createTimeStart?: string; //创建开始时间
  createTimeEnd?: string; //创建结束时间
  applyConstruction?: string[];
  applyConstructionTimeStart?: string; //申请施工开始时
  applyConstructionTimeEnd?: string; //申请施工结束时
  applyEndTime?: string[];
  applyEndTimeStart?: string; //申请施工开始时
  applyEndTimeEnd?: string; //申请施工结束时
  terminals?: string[]; //航站楼
  gridIds?: string; //网格化区域
  order?: any; //排序
}
interface ProblemType {
  id: number;
}
//查询条件
const search = ref<SearchType>({});
//表格数据
const loading = ref(false);
const tableData = ref<ProblemType[]>([]);
const pager = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});

/**
 * 点击查询
 */
const searchChange = (data: FilterDataType) => {
  getData();
};
//点击重置
const searchReset = (data: FilterDataType) => {
  search.value = {};
  pager.currentPage = 1;
  pager.pageSize = 10;
  getData();
};
/*
 * 功能-获取数据、分页查询
 */
const getData = () => {
  if (search.value.terminals?.length == 0) {
    search.value.terminals = undefined;
  }
  if (search.value.gridIds?.length == 0) {
    search.value.gridIds = undefined;
  }
  const { createTime, applyConstruction, applyEndTime, ...data } = search.value;
  const payload: any = {
    pageNum: pager.currentPage,
    pageSize: pager.pageSize,
    ...data,
  };
  console.log(payload);
  // loading = true;
  getapplyList(payload).then((res) => {
    // console.log("res-----", res);
    tableData.value = res.data.list;
    pager.total = res.data.total;
  });
};
//查看
const goDetails = async (id: any) => {
  // console.log("查看-------", id);
  router.push({
    path: "/construction/project-supervise/see",
    query: { id },
  });
};

//检查
const clickinspect = async (id: any) => {
  router.push({
    path: "/construction/project-supervise/inspect",
    query: { id },
  });
  // refinspectdemo.value.dialogVisible = true;
};

// 导出
const handleExport = () => {
  if(!tableData.value.length) {
    return ElMessage.info("没有相关数据，无法导出")
  }
  if (search.value.terminals?.length == 0) {
    search.value.terminals = undefined;
  }
  if (search.value.gridIds?.length == 0) {
    search.value.gridIds = undefined;
  }
  const { createTime, applyConstruction, applyEndTime, ...data } = search.value;
  Supervisionexport(data)
    .then((res: any) => {
      const link = document.createElement("a");
      const blob = new Blob([res], { type: "application/vnd.ms-excel" });
      link.style.display = "none";
      link.href = URL.createObjectURL(blob);
      link.setAttribute("download", `施工监管${new Date().toLocaleDateString().replace(/\//g, '-')}.xlsx`); // 报表名称可自定义
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    })
    .catch((res: any) => {
      ElMessage.error(res?.message || "导出失败");
    });
};
//排序
const handleSort = (column: any) => {
  const prop = column.prop;
  let order = column.order;
  if (order === "descending") {
    order = "desc";
  } else if (order === "ascending") {
    order = "asc";
  }
  search.value.order = [{ column: prop, method: order }];
  getData();
};
// 分页
const sizeChange = (size: number) => {
  pager.pageSize = size;
  getData();
};
const currentChange = (value: number) => {
  pager.currentPage = value;
  getData();
};
//初始化加载
onBeforeMount(() => {
  getsprojectIdData(); //项目编号
  getCreateUserOrgIdData();
  getcreatorData(); //创建人
  getterminalsData(); //航站楼
  getgridIdsData(); //网格区域
});
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped></style>
